<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui在线调试</title>
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
		<style>
			body {
				margin: 10px;
			}
			
			.layui-card-header {
				background: #01AAED;
				color: #fff
			}
			p.title-{
				color:#fff;
				font-size:16px;
				margin-bottom:10px
			}
			p.val{
			
				font-size:35px;
				color:#fff;
			}
			.kuai{
				height:60px;
				padding:20px 20px 20px 100px;
				background-repeat: no-repeat;
				background-size: 80px auto;
				background-position: left center;
			}
			.kuai.dian{
				background-image: url("../../images/dian.png");
			}
			.kuai.dianm{
				background-image: url("../../images/dianm.png");
			}
			.kuai.shui{
				background-image: url("../../images/shui.png");
			}
			.kuai.shuim{
				background-image: url("../../images/shuim.png");
			}
		</style>
	</head>

	<body>
		
		<!--    <div class="layui-container" style="margin-top: 20px">-->
		<div class="layui-row layui-col-space10">
			<div class="layui-col-xs3 layui-col-md3">
				<div class="layui-card" style="background-color: #009688;">
					<div class="layui-card-body kuai dian">
						<p class="title-">累计耗电</p>
						<p class="val">1734.00KWH</p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-md3">
				<div class="layui-card" style="background-color: #f45;">
					<div class="layui-card-body kuai dianm">
						<p class="title-">累计电费</p>
						<p class="val">￥2334.00</p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-md3">
				<div class="layui-card" style="background-color: #01AAED;">
					<div class="layui-card-body kuai shui">
						<p class="title-">累计水量</p>
						<p class="val">1634m3</p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-md3">
				<div class="layui-card" style="background-color: #2F4056; ">
					<div class="layui-card-body kuai shuim">
						<p class="title-">累计水费</p>
						<p class="val">￥13634</p>
					</div>
				</div>
			</div>
		</div>

		<!--    <div class="layui-container" style="margin-top: 20px">-->
		<div class="layui-row layui-col-space10">
			<div class="layui-col-lg6 layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">供水压力历史数据分析</div>
					<div class="layui-card-body">
						<div class="layui-col-xs12">
						    <div id="press" style="height: 300px;margin-top: 20px;"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-lg6 layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">实时供水占比情况分析</div>
					<div class="layui-card-body">
						<div class="layui-col-xs12">
						    <div id="supplyRate" style="height: 300px;margin-top: 20px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-xs12">
		    <div class="layui-card">
		        <div class="layui-card-body">
		            <div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
		                <ul class="layui-tab-title">
		                    <li class="layui-this">供水趋势</li>
		                    <li>耗能趋势</li>
		                </ul>
		                <div class="layui-tab-content">
		                    <div class="layui-tab-item layui-show">
		                        <div class="layui-row layui-col-space20">
		                            <div class="layui-col-xs6">
		                                <div id="xse" style="height: 300px;margin-top: 20px;"></div>
		                            </div>
		                            <div class="layui-col-xs6">
		                                <table class="layui-table" lay-skin="nob">
		                                    <colgroup>
		                                        <col width="50">
		                                        <col>
		                                        <col width="96">
		                                    </colgroup>
		                                    <thead>
		                                    <tr style="background: none;color: #333;">
		                                        <th colspan="3">小区供水排名</th>
		                                    </tr>
		                                    </thead>
		                                    <tbody>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-cyan">1</span></td>
		                                        <td>秣周东路诚园小区</td>
		                                        <td>323,234</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-cyan">2</span></td>
		                                        <td>秣陵福源小区</td>
		                                        <td>313,234</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-cyan">3</span></td>
		                                        <td>翠屏诚园小区</td>
		                                        <td>300,534</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-gray">4</span></td>
		                                        <td>世纪花园小区</td>
		                                        <td>223,214</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-gray">5</span></td>
		                                        <td>家乐福小区</td>
		                                        <td>213,134</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-gray">6</span></td>
		                                        <td>碧水湾小区</td>
		                                        <td>203,234</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-gray">7</span></td>
		                                        <td>同曦鸣城小区</td>
		                                        <td>183,934</td>
		                                    </tr>
		                                    </tbody>
		                                </table>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="layui-tab-item">
		                        <div class="layui-row layui-col-space20">
		                            <div class="layui-col-xs6">
		                                <div id="fwl" style="height: 300px;margin-top: 20px;"></div>
		                            </div>
		                            <div class="layui-col-xs6">
		                                <table class="layui-table" lay-skin="nob">
		                                    <colgroup>
		                                        <col width="50">
		                                        <col>
		                                        <col width="96">
		                                    </colgroup>
		                                    <thead>
		                                    <tr style="background: none;color: #333;">
		                                        <th colspan="3">耗能排名</th>
		                                    </tr>
		                                    </thead>
		                                    <tbody>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-cyan">1</span></td>
		                                        <td>秣周东路诚园小区</td>
		                                        <td>323,234</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-cyan">2</span></td>
		                                        <td>秣陵福源小区</td>
		                                        <td>313,234</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-cyan">3</span></td>
		                                        <td>翠屏诚园小区</td>
		                                        <td>300,534</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-gray">4</span></td>
		                                        <td>世纪花园小区</td>
		                                        <td>223,214</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-gray">5</span></td>
		                                        <td>家乐福小区</td>
		                                        <td>213,134</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-gray">6</span></td>
		                                        <td>碧水湾小区</td>
		                                        <td>203,234</td>
		                                    </tr>
		                                    <tr>
		                                        <td><span class="layui-badge layui-bg-gray">7</span></td>
		                                        <td>同曦鸣城小区</td>
		                                        <td>183,934</td>
		                                    </tr>
		                                    </tbody>
		                                </table>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<!--    </div>-->
	</body>
	<script src="../../../layui/layui.js"></script>
	<script src="../../libs/echarts/echarts.min.js"></script>
	<script src="../../libs/echarts/echartsTheme.js"></script>
	<script>
	    layui.use(['layer', 'element'], function () {
	        var $ = layui.jquery;
	        var layer = layui.layer;
	        var element = layui.element;
			
			var myCharts = echarts.init(document.getElementById('press'), myEchartsTheme);
			option = {
			    title: {
			        text: '压力数据对比'
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['翠屏诚园','奥斯伯恩','世纪花园','碧水湾','秣陵福源']
			    },
			    grid: {
			        left: '0',
			        right: '0',
			        bottom: '0',
			        containLabel: true
			    },
			    toolbox: {
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [
			        {
			            name:'翠屏诚园',
			            type:'line',
			            data:[120, 432, 301, 134, 490, 230, 110, 120, 432, 301, 134, 190, 230, 10]
			        },
			        {
			            name:'奥斯伯恩',
			            type:'line',
			            data:[220, 682, 191, 234, 290, 330, 310, 134, 190, 230, 110, 120, 432]
			        },
			        {
			            name:'世纪花园',
			            type:'line',
			            data:[150, 232, 201, 154, 190, 330, 410, 682, 191, 234, 290, 330, 310]
			        },
			        {
			            name:'碧水湾',
			            type:'line',
			            data:[320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 154, 190, 330]
			        },
			        {
			            name:'秣陵福源',
			            type:'line',
			            data:[520, 432, 901, 234, 290, 130, 120, 682, 191, 234, 390, 154]
			        }
			    ]
			};
			
			myCharts.setOption(option);
			
			var myCharts2 = echarts.init(document.getElementById('supplyRate'), myEchartsTheme);
			option1 = {
			    title : {
			        text: '各小区供水占比',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['翠屏诚园','奥斯伯恩','世纪花园','碧水湾','秣陵福源']
			    },
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:[
			                {value:335, name:'翠屏诚园'},
			                {value:310, name:'奥斯伯恩'},
			                {value:234, name:'世纪花园'},
			                {value:135, name:'碧水湾'},
			                {value:1548, name:'秣陵福源'}
			            ],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			
			myCharts2.setOption(option1);
	        // 渲染销售额图表
	        var myCharts3 = echarts.init(document.getElementById('xse'), myEchartsTheme);
	        var option3 = {
	            title: {
	                text: '供水趋势',
	                textStyle: {
	                    color: '#000',
	                    fontSize: 14
	                }
	            },
	            tooltip: {},
	            grid: {
	                left: '0',
	                right: '0',
	                bottom: '0',
	                containLabel: true
	            },
	            xAxis: {
	                data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	            },
	            yAxis: {},
	            series: [{
	                type: 'bar',
	                data: [726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 206, 506],
	                barMaxWidth: 45
	            }]
	        };
	        myCharts3.setOption(option3);
	
	        // 渲染访问量图表
	        var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme);
	        var option4 = {
	            title: {
	                text: '耗能趋势',
	                textStyle: {
	                    color: '#000',
	                    fontSize: 14
	                }
	            },
	            tooltip: {},
	            grid: {
	                left: '0',
	                right: '0',
	                bottom: '0',
	                containLabel: true
	            },
	            xAxis: {
	                data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	            },
	            yAxis: {},
	            series: [{
	                type: 'bar',
	                data: [558, 856, 880, 1325, 982, 856, 655, 546, 988, 985, 568, 302],
	                barMaxWidth: 45
	            }]
	        };
	        myCharts4.setOption(option4);
	
	        // 切换选项卡重新渲染
	        element.on('tab(tabZZT)', function (data) {
	            if (data.index == 0) {
	                myCharts3.resize();
	            } else {
	                myCharts4.resize();
	            }
	        });
	
	        // 窗口大小改变事件
	        window.onresize = function () {
	            myCharts.resize();
	            myCharts2.resize();
	            myCharts3.resize();
	            myCharts4.resize();
	        };
	
	    });
	</script>
</html>
